<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="Js_Css/HotelReviewsStyles.css">
<script type="text/javascript" src="Js_Css/HotelReviewsJs.js"></script>
<body>
<form action="huiFu" method="post" enctype="multipart/form-data">
    <div>
        <div>
                <tbody>
                <tr>
                    <td rowspan="2" style="color: crimson"><h1>4.9超棒</h1></td>
                    <td>
                        好评
                        <div class="progress-bar-container">
                            <div class="progress-bar" style="width:${Haopin}"></div> <!-- 假设设施评分为 90% -->
                        </div>
                    </td>
                    <td>
                        差评
                        <div class="progress-bar-container">
                            <div class="progress-bar" style="width:${Chapin}"></div> <!-- 假设服务评分为 85% -->
                        </div>
                    </td>
                </tr>
                </tbody>
        </div>
        <br>
        <br>
        <div id="op"><%--    选择房型--%>
            <div>
                <p id="e">全部评论</p>
            </div>
            <div id="div" style="height: 400px;width: 200px;color: #ff9900;display: none">
                <P class="all" name="all" value="all">全部评论</P>
                <hr>
                <P class="standard_room" name="standard_room" value="standard_room">好评</P>
                <hr>
                <p class="double_bed_room" name="double_bed_room" value="double_bed_room">差评</p>
            </div>
        </div>

        <p><div style="width: 100px;height: 20px;color: #007BFF" class="hotel-chakan">
            欢迎观看评论
        </div></p>
        <%--    <input type="button" value="全部房型" name="a">--%>
        <p id="tiu">发帖</p>
        <h1 id="toggleReviews" style="color: crimson">查看评论</h1>

        <c:forEach var="comment" items="${commentsList}" >
        <div class="review-container">
            <div class="user-info">
                <img src="${comment.img}">
                <div class="user-details">
                    <h3 class="user-name" name="zhuName">${comment.username}</h3>
                    <p class="user-location">IP: 上海</p>
                    <p class="user-comment">特惠大床房,商务出差</p>
                </div>
                <span>${comment.xin}</span>
            </div>
            <div>
                <p>${comment.usercomment}</p>
            </div>
            <hr/>
            <h2>酒店回复</h2>
            <span>尊敬的宾客，非常感谢您对我们酒店的好评，我们会再接再厉不辜负您的好评。再次感谢您对酒店的肯定，期待再次光临，祝旅途愉快！</span>
            <input type="button" class="delete-comment" data-comment-id="${comment.id}"  value="删除">
        </div>
    </div>
    </c:forEach>
</form>
<div id="pagination">
    <c:if test="${currentNo > 1}">
        <button class="pagination-button" data-pageno="${currentNo - 1}" onclick="change(${currentNo - 1})">上一页</button>
    </c:if>
    <c:forEach var="i" begin="1" end="${totalPages}">
        <c:choose>
            <c:when test="${i == currentNo}">
                <span>${i}</span>
            </c:when>
            <c:otherwise>
                <button class="pagination-button" data-pageno="${i}">${i}</button>
            </c:otherwise>
        </c:choose>
    </c:forEach>
    <c:if test="${currentNo < totalPages}">
        <button class="pagination-button" data-pageno="${currentNo + 1}" onclick="chang(${currentNo + 1})">下一页</button>
    </c:if>
</div>
</body>
</html>
